<template>
<div>
	<div class="bigtitle">
		<div class="bigtitle-title">领券中心</div>
	</div>

	<Row :gutter="10">
		<Col v-for="(item, index) in items" :key="index" :xs="{ span: 24, offset: 0 }" :sm="{ span: 12, offset: 0 }" :md="{ span: 8, offset: 0 }" mgt2>
			<table long>
				<tr>
					<td v-if="!item.isOverdue" white bg-orange bd-orange h6 text-center left style="width:30%">
						<p mgt2><span>￥</span><span sz4>{{item.amount}}</span></p>
						<p mgt1>订单满{{item.minAmount}}可用</p>
					</td>
					<td v-if="item.isOverdue" white bg-gray4 bd-gray4 h6 text-center left style="width:30%">
						<p mgt2><span>￥</span><span sz4>{{item.amount}}</span></p>
						<p mgt1>订单满{{item.minAmount}}可用</p>
					</td>
					<td bd-gray4 nobdl h6 left pd2 style="width:55%;border-right-style:dashed;">
						<p sz2 mgt1>{{item.name}}</p>
						<p gray3>{{['全部商品','部分商品'][item.targetType]}}</p>
						<p gray3>{{formatTimeStr(item.begin, 'YYYY.MM.DD')}}至{{formatTimeStr(item.end, 'YYYY.MM.DD')}}</p>
					</td>
					<td h6 left nobdl bd-gray4 style="width:15%;">
						<div style="width:16px;line-height:20px;" center>
							<div v-if="item.isOverdue" middle h6 gray3>已结束</div>
							<div v-else-if="item.isReceived" middle h6 gray3>已领取</div>
							<div v-else-if="item.hasRest" @click="handleReceiveCoupon(item.id)" middle h6 linkable>立即领取</div>
							<div v-else-if="!item.hasRest" middle h6 gray3>已抢光</div>
						</div>
					</td>
				</tr>
			</table>
		</Col>
	</Row>

    <AutoPage :value="page" text-right mgt2></AutoPage>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import AutoPage from '@common/components/AutoPage';

@Component({
    components: { AutoPage }
})
export default class CouponCenter extends AbpBase{
	get page() {
		return this.$store.state.websiteInfo.couponPage;
	}
	get items() {
		return this.page.items;
	}
	async handleReceiveCoupon(id:Number){
		var response = await this.post('Coupon/MemberReceiveCoupon', { id: id });
		if(response.success) {
			this.page.getData();
		}
	}
}
</script>
